<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">视频宣教</view>
			<view class="right" @click="toPage('search')">记录查询</view>
		</view>
		<!--入口-->
		<view class="items flex-row">
			<view @click="toggleTab(0)" class="item flex-column">
				<image src="../../../static/img/education/teach-rect.png"></image>
				<view :class="{active: tabIndex == 0}">专家授课</view>
			</view>
			<view @click="toggleTab(1)" class="item flex-column">
				<image src="../../../static/img/education/case-rect.png"></image>
				<view :class="{active: tabIndex == 1}">案例教育</view>
			</view>
			<view @click="toggleTab(2)" class="item flex-column">
				<image src="../../../static/img/education/record-rect.png"></image>
				<view :class="{active: tabIndex == 2}">行业视频</view>
			</view>
			<view @click="toggleTab(3)" class="item flex-column">
				<image src="../../../static/img/education/record-rect.png"></image>
				<view :class="{active: tabIndex == 3}">学习记录</view>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="getNextPageData" class="body">
			<!--专家授课列表-->
			<view v-show="tabIndex == 0" class="scroll">
				<view class="card-box">
					<view class="card-box-title">我的学习任务</view>
					<view class="card-box-content">
						<view v-for="(item, index) in list" :key="index" class="card" @click="toStudy(item)">
							<view class="title flex-row">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{ item.topic }}</view>
							<view class="item"><view>授课专家：{{ item.teacher || '无专家' }}</view></view>
							<view class="item"><view>学习时间：{{ item.start_time.split(' ')[0] }} ~ {{ item.over_time.split(' ')[0] }}</view></view>
							<view class="item"><view>学习要求：{{ item.status == 1 ? '纳入绩效考核'  : '不纳入绩效考核' }}</view></view>
							<view class="item flex-row">
								<view>参与学员：{{ item. join_num || 0 }}人</view>
								<view style="width: 50%;">学习状态：{{ item.is_join ? '已学习' : '未学习' }}</view>
							</view>
							<view class="item flex-row">
								<view>视频时长：{{ item.minutes || 0 }}分钟</view>
								<view style="width: 50%;">学习时长：{{ item.study_time || 0 }}分钟</view>
							</view>
							<view class="item flex-row" @click="toggleExperience(index)">
								<view>查看学习心得</view>
								<uni-icons v-if="show[index]" type="arrowup" size="18" color="#999"></uni-icons>
								<uni-icons v-else type="arrowdown" size="18" color="#999"></uni-icons>
							</view>
							<view v-show="show[index]" class="item experience">{{ item.notes || '暂无' }}</view>
							<view class="item flex-row btns">
								<view class="btn success" @click.stop.prevent="toJoinMember(item.join_man_names)">学员列表</view>
								<view class="btn success" @click.stop.prevent="toPage('unjoinMember?id='+item.id)">未学习人员</view>
								<view class="btn" @click.stop.prevent="toPage('log?id='+item.id)">学习日志</view>
								<view class="btn" @click.stop.prevent="toPage('experience?id='+item.id)" v-if="!item.is_join && !item.notes">添加学习心得</view>
							</view>
						</view>
						<view class="nodata">没有更多了~</view>
					</view>
				</view>
			</view>
			<!--案例教育列表-->
			<view v-show="tabIndex == 1" class="scroll">
				<view class="card-box">
					<view class="card-box-title">案例视频列表</view>
					<view class="card-box-content">
						<view v-for="(item, index) in list" :key="index" class="card">
							<view class="title flex-row">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{ item.topic }}</view>
							<view class="item flex-row"><view>学习状态：{{ item.is_join ? '已学习' : '未学习' }}</view></view>
							<view class="item flex-row"><view>学习时长：{{ item.study_time || 0 }}分钟</view></view>
							<view class="item flex-row btns">
								<view class="btn success">查看学习日志</view>
							</view>
						</view>
						<view class="nodata">没有更多了~</view>
					</view>
				</view>
			</view>
			<!--行业视频列表-->
			<view v-show="tabIndex == 2" class="scroll">
				<view class="card-box">
					<view class="card-box-title">行业视频列表</view>
					<view class="card-box-content">
						<view v-for="(item, index) in list" :key="index" class="card">
							<view class="title flex-row">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{ item.topic }}</view>
							<view class="item flex-row"><view>学习状态：{{ item.is_join ? '已学习' : '未学习' }}</view></view>
							<view class="item flex-row"><view>学习时长：{{ item.study_time || 0 }}分钟</view></view>
							<view class="item flex-row btns">
								<view class="btn success">查看学习日志</view>
							</view>
						</view>
						<view class="nodata">没有更多了~</view>
					</view>
				</view>
			</view>
			<!--我的学习记录-->
			<view v-show="tabIndex == 3" class="scroll">
				<view class="card-box">
					<view class="card-box-title">我的学习记录</view>
					<view class="card-box-content">
						<view v-for="(item, index) in list" :key="index" class="card">
							<view class="title flex-row">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{ item.topic }}</view>
							<view class="title flex-row">
								<view>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：专家授课</view>
								<view style="width: 50%;">专家名称：{{ item.teacher || '无专家' }}</view>
							</view>
							<view class="item flex-row"><view>创建时间：{{ item.addtime }}</view></view>
							<view class="item flex-row"><view>开始时间：{{ item.start_time }}</view></view>
							<view class="item flex-row"><view>结束时间：{{ item.over_time }}</view></view>
							<view class="item flex-row"><view>学习时长：{{ item.study_time || 0 }}分钟</view></view>
						</view>
						<view class="nodata">没有更多了~</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { date } from '@/common/function.js'
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			tabIndex: 0,
			tabName: '专家授课',
			userid: uni.getStorageSync('userid'),
			miss_id: '',
			video_type: '',
			type: 'myJoin',
			page: 1,
			total: 1,
			list: [],
			show: []
		}
	},
	onLoad(option){
		this.tabIndex = option.type || 0;
	},
	onShow(){
		this.getList();
		
		// 判断观看时间
		let startTime = uni.getStorageSync('videoStudyStartTime');
		if(startTime){	// 计算时间差
			startTime = startTime.replace(/-/g, '/');
			startTime = new Date(startTime).getTime();
			
			let nowTime = new Date().getTime();
			let diffTime = nowTime - startTime;
			let minutes = Number.parseInt(diffTime / 60000);
			if(minutes >= 1) this.submitTime();
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 提交时常
		submitTime(){
			let oDate = date();
			uni.request({
				url: this.$API.eduVideoMyTaskLogAdd,
				data: {
					type: this.video_type,
					userid: uni.getStorageSync('userid'),
					miss_id: this.miss_id,
					start_time: uni.getStorageSync('videoStudyStartTime'),
					over_time: `${oDate.year}-${oDate.month}-${oDate.day} ${oDate.hours}:${oDate.minutes}:${oDate.seconds}` 
				},
				method: 'POST',
				header: this.$API.get_head(),
				success: ()=>{
					uni.removeStorageSync('videoStudyStartTime');
				}
			})
		},
		// 学习
		toStudy(item){
			// 校验观看时间是否合理：不能早于开始时间，不能晚于结束时间
			let startTime = item.start_time.replace(/-/g, '/');
			let overTime = item.over_time.replace(/-/g, '/');
			let nowTime = new Date().getTime();
			
			startTime = new Date(startTime).getTime();
			overTime = new Date(overTime).getTime();
			
			if(nowTime < startTime){
				return uni.showToast({
					icon: 'none',
					title: '视频观看时间未到'
				})
			}
			
			if(nowTime > overTime){
				return uni.showToast({
					icon: 'none',
					title: '视频观看时间已逾期'
				})
			}
			
			// 记录时间
			this.miss_id = item.id;
			this.video_type = item.type;
			let oDate = date();
			uni.setStorageSync('videoStudyStartTime', `${oDate.year}-${oDate.month}-${oDate.day} ${oDate.hours}:${oDate.minutes}:${oDate.seconds}`);
			
			// 跳转学习
			uni.navigateTo({
				url: 'play?src='+encodeURIComponent(item.video_url)
			})
		},
		// 学员列表
		toJoinMember(item){
			uni.setStorageSync('video_joined_members', item);
			uni.navigateTo({url: 'joinMember'});
		},
		// 切换类别
		toggleTab(index){
			if(index == 0) this.tabName = '专家授课';
			if(index == 1) this.tabName = '案例教育';
			if(index == 2) this.tabName = '行业视频';
			this.list = [];
			this.show = [];
			this.tabIndex = index;
			index == 3 ? this.getRecordList() : this.getList();
		},
		// 切换心得
		toggleExperience(index){
			this.show.splice(index, 1, !this.show[index]);
		},
		// 处理show
		doShow(number){
			let arr = [];
			for(let i=0; i<number; i++){
				arr.push(false);
			}
			return arr;
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.eduVideoMyTaskList,
				data: { userid: this.userid, type: this.tabName },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
						_this.show = _this.doShow(data.length);
					}else{
						_this.list = _this.list.concat(data);
						_this.show = _this.show.concat(_this.doShow(data.length));
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.tabIndex == 3 ? this.getRecordList() : this.getList();
			}
		},
		// 获取学习记录列表
		getRecordList(){
			let _this = this;
			uni.request({
				url: this.$API.eduVideoMyTaskLog,
				data: { userid: this.userid },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
						_this.show = _this.doShow(data.length);
					}else{
						_this.list = _this.list.concat(data);
						_this.show = _this.show.concat(_this.doShow(data.length));
					}
				}
			})
		},
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.body{
	height: calc(100vh - 88upx - 270upx - var(--status-bar-height));
	overflow: hidden;
}


/*卡片容器*/
.card-box{
	margin-bottom: 20upx;
	padding-bottom: 2upx;
	padding-top: 10upx;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}

.card{
	margin: 0 20upx 20upx;
	border-radius: 16upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .item text{
	color: #41A4E8;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.card .item.btns .btn{
	color: #fff;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	padding: 0 10upx;
	margin-right: 20upx;
	background-color: #1692DC;
}
.card .item.btns .btn:last-child{
	margin-right: 0;
}
.card .item.btns .btn.success{
	background-color: #09BB07;
}
.card .item.experience{
	background: #eee;
	font-size: 28upx;
	border-radius: 8upx;
	padding: 10upx 20upx;
}

/*入口*/
.items{
	background: #fff;
	padding: 20upx 40upx;
}
.items .item image{
	width: 130upx;
	height: 130upx;
}
.items .item view{
	height: 100upx;
	font-size: 28upx;
	position: relative;
}
.items .item view::after{
	content: '';
	width: 0;
	height: 0;
	border-top: 30upx solid #BFBFBF;
	border-right: 24upx solid transparent;
	border-left: 24upx solid transparent;
	position: absolute;
	left: calc(50% - 30upx);
	bottom: 10upx;
}
.items .item view.active::after{
	border-top: 30upx solid #1390E1;
}
</style>
